<template>
    <div class="base-empty">
        <slot name="default">
            <div class="empty-img" :style="{ width: imgComputedSize, height: imgComputedSize }">
                <img src="@/assets/images/empty.gif" alt="空数据" :draggable="false" />
            </div>
        </slot>
        <slot name="desc" v-if="$slots.desc || desc">
            <div class="empty-desc">{{ desc }}</div>
        </slot>
    </div>
</template>

<script setup>
import { addUnit } from 'element-plus/es/utils/dom/style'
import { computed } from 'vue'

defineOptions({
    name: 'BaseEmpty'
})

const props = defineProps({
    desc: {
        type: String,
        default: '暂无数据'
    },
    imgSize: {
        type: [Number, String],
        default: 50
    }
})

const imgComputedSize = computed(() => {
    return addUnit(props.imgSize, '%')
})
</script>

<style lang="scss" scoped>
.base-empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    .empty-img {
        width: 50%;
        height: 50%;
        user-select: none;

        img {
            width: 100%;
            height: 100%;
            object-fit: scale-down;
        }
    }

    .empty-desc {
        font-size: 1rem;
        color: var(--el-text-color-secondary);
        user-select: none;
    }
}
</style>